<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
	
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			a {
			color:black;
			}
			.mui-loader {
				position: absolute;
				top: 25%;
				width: 100%;
				height: 60%;
				color: #888;
				font-size: 14px;
				text-align: center;
			}
			.mui-fadein {
				opacity: 1;
			}
			.mui-fadeout {
				opacity: 0;
			}
			@keyframes fadein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			@keyframes fadeout {
				from {
					opacity: 1;
				}
				to {
					opacity: 0;
				}
			}
			@-webkit-keyframes fadeout {
				from {
					opacity: 1;
				}
				to {
					opacity: 0;
				}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a  class="mui-icon mui-action-back  mui-pull-left mui-icon-back"></a>
			
			<a  class="mui-action-menu mui-icon mui-pull-right mui-icon-trash"></a>
			<h1 id="title" class="mui-title">消息</h1>
		</header>
		<div class="mui-loader">加载中...</div>

		<script  type="text/javascript" src="js/mui.min.js"></script>
		
		
		<script>	
		
		 mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
	   var subWebview1 =null;
	    var subWebview2 =null;
	    var currentShowSubWebview = null
  	
		var url = 'http://m.tieba.com/p/'
		window.addEventListener("refresh2", function (event) {
		
				var subWebview = getNOTShowSubview ()
						
				var mid = event.detail.mid;
				var xurl  = url+mid;
			
			//	mui.currentWebview.setStyle({  mask: 'rgba(0,0,0,.5)'  })
				plus.nativeUI.showWaiting();
				
			//	subWebview.hide();
			
				mui.ajax({
					url:xurl,
					success:function (data){
						// console.log("success",data);
						subWebview.loadData(data)
						
					},
					error:function (data){
						console.log('error',data.toString());	
						
					},
					timeout: 5000			
				})		
	
		});
	
		function ceateWebview (id) {
			var ws = plus.webview.currentWebview()
			var  sub = plus.webview.create('',id,{top:"45px",bottom:"0px",bounce: 'vertical'});
		  	  ws.append( sub );  	 
		  	  console.log("子页面标志 initSubview",id,sub);
		}	
		
		function initSubview (){
				subWebview1 = plus.webview.getWebviewById("message_detail_sub_1");	
				subWebview2 = plus.webview.getWebviewById("message_detail_sub_2");	
				if(!subWebview1 ){
					ceateWebview ('message_detail_sub_1') ;
				}
				if (!subWebview2) {
					ceateWebview ('message_detail_sub_2') 				
				}
				 currentShowSubWebview = subWebview1
			}

	 	 function getNOTShowSubview (){
	 	    	
	 	    		return subWebview1;
	  			
	  			if(currentShowSubWebview == subWebview1)  {
	  					currentShowSubWebview = subWebview2
	  				 	return subWebview2;
	  			}
	  			else {
	  				 currentShowSubWebview = subWebview1
	  				 return subWebview1;
	  			}
	  		}
  
	mui.plusReady((function () {
			
			 initSubview () //只执行一次
			  
		    subWebview1 = plus.webview.getWebviewById("message_detail_sub_1");	
			
			subWebview2 = plus.webview.getWebviewById("message_detail_sub_2");
			
			subWebview1.hide();
			
			subWebview2.hide();
				
			console.log("plusReady",subWebview1,subWebview2);
			
			subWebview1.addEventListener("loaded", function () {
					mui.later(function () {
					//	webview.show('zoom-fade-out',150);//fade-out
						 subWebview1.show('none',150);//fade-ou
						 plus.nativeUI.closeWaiting();
						
						// mui.currentWebview.setStyle({  mask: 'none'  })
					},150)
				 	console.log("webview show subWebview1");
		 			current_subWebview = subWebview1
			}, false)
			
			subWebview2.addEventListener("loaded", function () {
					mui.later(function () {
					//	webview.show('zoom-fade-out',150);//fade-out
						 subWebview2.show('none',150);//fade-ou
						 plus.nativeUI.closeWaiting();

					// mui.currentWebview.setStyle({  mask: 'none'  })
					},150)
				 	console.log("webview show subWebview2");
		 		 
			}, false)
			
		}))
		
		</script>
	</body>

</html>